<template>
  <div @mouseleave.stop="closeDropdown">
    <ul class="ul-nav-menus" :class="{ transparent: isTransparent }">
      <li
        v-for="item in navMenus"
        :key="item.value"
        class="item"
        :class="{
          'is-current': item.value === currentItem.value,
          'is-active': item.value === activeItem.value,
        }"
        @mouseenter.stop="() => hoverChange(item, 'enter')"
        @mouseleave.stop="() => hoverChange(item, 'leave')"
      >
        <a
          @click="clickItem(item)"
          v-if="(item.title == '工作台' && contexInfo && contexInfo.roleIds.indexOf('JGGLY') > -1) || item.title != '工作台'"
          href="javascript:void(0)"
          class="link-text"
        >{{ $t(item.title) }}
          <div v-if="item.title === '产品'" class="xst">销售通</div>
        </a>
        <div
          v-if="
            hover && item.type === 'dropdown' &&
              (item.title != '工作台' || (item.title == '工作台' && contexInfo && contexInfo.roleIds.indexOf('JGGLY') > -1))
          "
          class="item-com-wrapper"
          :class="{'item-com-wrapper-product': item.title == '产品'}"
        >
          <component :is="moduleOption[item.value].name" @nav-click="navClick" @group-click="groupClick" />
        </div>
      </li>
    </ul>

    <div
      v-if="activeItem.value && activeItem.value === 'Investigate'"
      class="nav-dropdown"
      :class="{ show: showDropDown }"
      :style="{ height: moduleOption[activeItem.value].height }"
      @mouseleave.stop="closeDropdown"
    >
      <div class="nav-content">
        <PageHeaderNavStudy @nav-click="navClick" @group-click="groupClick" />
        <!-- <component :is="moduleOption[activeItem.value].name" @nav-click="navClick" @group-click="groupClick" /> -->
        <!-- <div class="close-box" @click="closeDropdown">
            <i class="el-icon-close"></i>
          </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import PageHeaderNavStudy from './PageHeaderNavStudy.vue';
import PageHeaderAvatar from './PageHeaderAvatar.vue';
import PageHeaderNavService from './PageHeaderNavService.vue';
import { NAV_LIST } from './navmenu.data';
import { verifyRoles } from '@/utils/verify';
import { mapGetters } from 'vuex';
// 模块配置
const moduleOption = {
  Investigate: {
    name: 'PageHeaderNavStudy',
    height: '560px'
  },
  TradeIndex: {
    name: 'PageHeaderNavTrade',
    height: '180px'
  },
  DataIndex: {
    name: 'PageHeaderNavData',
    height: '100px'
  },
  QuotePurchaseIndex: {
    name: 'PageHeaderNavProduct',
    height: '100px'
  },
  //
  ServiceTrade: {
    name: 'PageHeaderNavService',
    height: '100px'
  },
  AdminsysIndex: {
    name: 'PageHeaderNavwork',
    height: '100px'
  },
  MoreIndex: {
    name: 'PageHeaderMore',
    height: '180px'
  }
};

export default {
  components: {
    PageHeaderNavTrade: () => import('./PageHeaderNavTrade.vue'),
    PageHeaderNavData: () => import('./PageHeaderNavData.vue'),
    PageHeaderNavProduct: () => import('./PageHeaderNavProduct.vue'),
    PageHeaderNavwork: () => import('./PageHeaderNavwork.vue'),
    PageHeaderMore: () => import('./PageHeaderMore.vue'),
    PageHeaderNavStudy,
    PageHeaderAvatar,
    PageHeaderNavService
  },
  props: {
    isTransparent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      login: JSON.parse(localStorage.getItem('VINTEX_login')),
      moduleOption,
      navMenus: NAV_LIST,
      currentItem: '',
      activeItem: '', // 鼠标经过item
      hover: false
    };
  },

  computed: {
    showDropDown () {
      return this.hover && this.activeItem.value;
    },
    ...mapGetters({
      contexInfo: 'contexInfo'
    })
  },
  watch: {
    $route: {
      handler (newRoute) {
        if (newRoute.name) {
          this.currentItem = this.navMenus.find((item) => item.value === newRoute.name) || '';

          if (!this.currentItem) {
            const matchedArr = newRoute.matched.filter((item) => item.path !== '');
            if (matchedArr.length > 0) {
              this.currentItem = this.navMenus.find((item) => item.path === matchedArr[0].path) || '';
            }
          }
        }
      },
      immediate: true
    }
    // showDropDown(val) {
    //   if (val) {
    //     // document.body.style.position = 'fixed';
    //     document.body.style.overflow = 'hidden';
    //     // document.body.style.top = '0';
    //     // document.body.style.width = '100%';
    //     // document.body.style['overflow-y'] = 'scroll';
    //   } else {
    //     document.body.style = {};
    //   }
    // },
  },
  methods: {
    navInner (item) {
      if (item.inner) {
        this.$router.push(item.value);
      } else {
        if (item.path) {
          window.location = process.env.VUE_APP_COSWEBURL + '/#' + item.path;
        }
      }
    },
    navClick (item) {
      this.hover = false;
      this.closeDropdown();
      this.navInner(item);
    },
    groupClick (item) {
      // 跳转
      this.closeDropdown();
      let toUrl = process.env.VUE_APP_COSWEBURL + '/#/investigate/industryResearch/' + item.rguid + '?id=' + item.rguid;
      if (item.sources || item.sources === 0) {
        toUrl += '&sources=' + encodeURIComponent(item.sources);
      }

      toUrl += '&pid=' + item.pid;

      if (item.imgUrl) {
        toUrl += '&imgUrl=' + encodeURIComponent(item.imgUrl);
      }
      if (item.industryName) {
        toUrl += '&industryName=' + encodeURIComponent(item.industryName);
      }

      window.location = toUrl;
    },

    hoverChange (item, type) {
      // 'TradeIndex', 'QuotePurchaseIndex', 'Investigate', 'DataIndex', 'ServiceTrade'
      if (
        !['Investigate', 'TradeIndex', 'QuotePurchaseIndex', 'DataIndex', 'ServiceTrade', 'AdminsysIndex', 'MoreIndex'].includes(
          item.value
        )
      ) {
        this.hover = false;
        return;
      }
      if (type === 'enter') {
        this.hover = true;
        this.activeItem = item;
      } else {
        // this.hover = false;
      }
    },

    clickItem (item) {
      // this.$sensors.track('index_breadcrumb_button_click', { button_name: item.title });
      this.currentItem = item;
      if (item.title === '产品') return;
      if (item.title === '产品' || item.title === '数据') {
        const judge = verifyRoles('research', 0);
        if (judge) {
           this.navInner(item);
          return;
        } else {
          return;
        }
      }
      // if (item.title == '数据') return;
      // if (item.title == '工作台') return;
      this.navInner(item);

      this.hover = false;

      // switch (item.title) {
      //   case '研究':
      //     // this.$sensors.track('daohe_index_research', item);
      //     this.$sensors.track('index_research_button_click', {button_name: item.title});
      //     break;
      //   case '产品':
      //     // this.$sensors.track('daohe_index_product', item);
      //     this.$sensors.track('index_product_button_click', {button_name: item.title});
      //     break;
      //   case '交易':
      //     // this.$sensors.track('daohe_index_trade', item);
      //     this.$sensors.track('index_trade_button_click', {button_name:item.title});
      //     break;
      //   case '服务':
      //     // this.$sensors.track('daohe_index_service', item);
      //     this.$sensors.track('index_service_button_click', {button_name: item.title});
      //     break;
      //   case '数据':
      //     // this.$sensors.track('daohe_index_data', item);
      //     this.$sensors.track('index_data_button_click', {button_name: item});
      //     break;
      // }
    },

    closeDropdown () {
      this.hover = false;
      this.activeItem = '';
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin box-shadow() {
  border-radius: 0 0 4px 4px;
  // box-shadow: 0 2px 8px 0 rgba(146, 203, 247, 0.2);
  box-shadow: 0 2px 8px 0 rgba(42, 128, 200, 0.2);
}

.ul-nav-menus {
  display: flex;

  &.transparent {
    .item {
      &.is-current a {
        font-weight: bold;
        color: #fff;
      }

      &.is-active > a::after,
      &.is-current > a::after {
        background-color: #fff;
      }

      a {
        color: #fff !important;
      }
    }
  }

  .item {
    position: relative;
    padding: 0 10px;

    .link-text {
      display: block;
      position: relative;
      padding: 0 12px;
      font-size: 18px;
      line-height: $page-header-height;
      color: #333;
      text-decoration: none;
      white-space:nowrap;
      &:hover {
        color: $app-main-color;
      }
      .xst{
        position: absolute;
        top: 10px;
        left: 40px;
        width: 44px;
        height: 19px;
        font-family: 'Source Han Sans CN';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 17px;
        text-align: center;
        background: url('~@/assets/img/header/product/xst_icon.png') 0 0 no-repeat;
        border-radius: 4px;
        color: #FFFFFF;
      }
    }

    // &.is-current .link-text {
    //   color: $app-main-color;
    // }

    &.is-current .link-text {
      color: $app-main-color;

      &::after {
        content: '';
        position: absolute;
        z-index: 2000;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: $app-main-color;
        opacity: 1;
      }
    }

    .item-com-wrapper {
      transition: 0.2s ease-in-out;
      transform: translateX(-50%);
      display: none;
      overflow: hidden;
      position: absolute;
      z-index: 1900;
      left: 50%;
      top: 100%;
      // background: rgba(255, 255, 255, 0.95);
      background: rgba(238, 244, 255, 0.95);

      @include box-shadow;
      // 产品
      @media screen and (max-width: 1400px) {
        &-product {
          transform: translateX(-30%);
        }
      }
    }

    &:hover {
      .item-com-wrapper {
        //display: initial;
        display: block;
      }
    }
  }
}

.nav-dropdown {
  transition: height 0.2s ease-in-out;
  transform: translateX(-50%);
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  z-index: 1900;
  left: 50%;
  top: 100%;
  width: 1200px;
  height: 0;
  max-height: calc(100vh - 80px);
  // background: rgba(255, 255, 255, 0.95);
  background: rgba(238, 244, 255, 0.95);

  @include box-shadow;

  &.show {
    //visibility: initial;
    visibility: visible;
    // height: 560px;
  }

  .nav-content {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;

    .close-box {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      font-size: 28px;
      color: #666;
    }
  }
}
</style>
